import {AfterViewInit, Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {NzMessageService} from 'ng-zorro-antd';
import {AuthService} from '../guard/auth.service';

interface RespData {
  status: number;
}

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
export class LoginComponent implements AfterViewInit, OnInit {

  form: FormGroup;

  // #region fields
  error = '';
  type = 0;
  loading = false;
  count = 0;
  interval$: any;

  constructor(
    private fb: FormBuilder,
    private authService: AuthService,
    private message: NzMessageService,
    private router: Router) {
    this.form = fb.group({
      userName: [null, [Validators.required, Validators.minLength(4)]],
      password: [null, Validators.required],
      mobile: [null, [Validators.required, Validators.pattern(/^1\d{10}$/)]],
      captcha: [null, [Validators.required]],
      remember: [true],
    });
  }

  get userName() {
    return this.form.controls.userName;
  }

  get password() {
    return this.form.controls.password;
  }

  // #region get captcha

  get mobile() {
    return this.form.controls.mobile;
  }

  get captcha() {
    return this.form.controls.captcha;
  }

  // #endregion

  switch(ret: any) {
    this.type = ret.index;
  }

  getCaptcha() {
    if (this.mobile.invalid) {
      this.mobile.markAsDirty({onlySelf: true});
      this.mobile.updateValueAndValidity({onlySelf: true});
      return;
    }
    this.count = 59;
    this.interval$ = setInterval(() => {
      this.count -= 1;
      if (this.count <= 0) {
        clearInterval(this.interval$);
      }
    }, 1000);
  }

  // #endregion

  submit() {
    this.error = '';
    if (this.type === 0) {
      this.userName.markAsDirty();
      this.userName.updateValueAndValidity();
      this.password.markAsDirty();
      this.password.updateValueAndValidity();
      if (this.userName.invalid || this.password.invalid) {
        return;
      }
    } else {
      this.mobile.markAsDirty();
      this.mobile.updateValueAndValidity();
      this.captcha.markAsDirty();
      this.captcha.updateValueAndValidity();
      if (this.mobile.invalid || this.captcha.invalid) {
        return;
      }
    }
    this.loading = true;
    const loginData: object = this.form.value;
    this.authService.loginIn(loginData).subscribe((val: RespData) => {
      if (200 !== val.status) {
        this.message.error('登陆失败,账号密码错误');
        this.loading = false;
        return false;
      }
      const redirectUrl = this.authService.redirectUrl || this.authService.loginUrl;
      this.router.navigateByUrl(redirectUrl);
    });
  }

  open(type: string) {

  }

  ngAfterViewInit(): void {
    if (this.authService.getToken()) {
      const redirectUrl = this.authService.redirectUrl || this.authService.loginUrl;
      this.router.navigateByUrl(redirectUrl);
    }
  }

  ngOnInit(): void {

  }
}
